<template>
     <div class="bannerinfo">
         <div class='box'>
            <div class="left">
                <p class='pone'><span class='score'>4.9</span><span class='fen'>分</span><span class='goods'>很棒</span></p>
                <p class='ptwo'><span>169852评论</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>58条攻略</span></p>
            </div>
            <div class="right">
                <p class="tips">景点简介</p>
                  <p class='timeinfo'><span class='time'>开放时间、Tips</span></p>
            </div>
         </div>
          <div class="where">
              <p>四川省成都市都江堰市青城山路</p>
          </div>
      </div>
</template>

<style lang="scss" scoped>
 .bannerinfo{
        width: 100%;
        background-color: #fff;
        border-radius: .1rem .1rem 0 0; 
        display: flex;
        flex-direction: column;
        .box{
            display: flex;
            flex-wrap: wrap;
            width: 95%;
            .left{
              width: 52%;
                padding-top: .1rem;
                padding-bottom: .2rem;
                 padding-left: 0.2rem;  
                 position: relative;
                p{
                    width: 100%;
                    padding-top: 0.1rem;
                }
                .pone{
                    .score{
                        font-size: .44rem;
                        color: #ff8300;
                        line-height: .44rem;
                    }
                    .fen{
                        font-size: .28rem;
                        color: #ff8300;
                        line-height: .48rem;
                    }
                    .goods{
                        font-size: .28rem;
                        color: #ff8300;
                        line-height: .48rem;
                        margin-left: .2rem;
                    }
                }
                .ptwo{
                    font-size: .24rem;
                    color: #9e9e9e;
                    line-height: .32rem;
                    margin-right: .2rem;
                }
            }
            .left::before{
                content: '';
                width: 0.03rem;
                height: 0.65rem;
                background-color: #eee;
                position: absolute;
                right: 0.1rem;
                top: 0.3rem;
            }
            .right{
                width: 40%;
                 padding-top: .1rem;
                padding-bottom: .2rem;
              
                  p{
                    width: 100%;
                    padding-top: 0.1rem;
                }
                .tips{
                    font-size: .28rem;
                    color: #212121;
                    line-height: .48rem;
                    padding-left: .3rem;
                }
                 .timeinfo{
                      span{
                        color: #9e9e9e;
                        font-size: .24rem;
                        padding-left: .3rem;
                      }
                    }
            }
        }
        .where{
            padding: 0.2rem 0 0 0.5rem;
        }
        
    }
</style>

